<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      /*.container {*/
      /*  height: 100vh;*/
      /*  overflow: auto;*/
      /*}*/
      .box-red {
        width: 100%;
        height: 50vh;
      }
      .box-blue {
        width: 100%;
        height: 30vh;
      }
      .box-yellow {
        width: 100%;
        height: 60vh;
      }
      .box-pink {
        width: 100%;
        height: 60vh;
      }
    </style>
  </head>
  <body style="height: 100vh; overflow-y: auto">
    <div class="container">
      <div class="box-red">1</div>
      <div class="box-blue">2</div>
      <div class="box-yellow">3</div>
      <div class="box-pink">4</div>
    </div>
    <script src="./lib/b-utils.js"></script>

    <script>
      const {snakeCase, kebabCase,camelCase, capitalize, throttle, parentNodesInTree,childNodesInList, eachTree,treeToList,listToTree,matchSubListGroup,chunk, arrayToObj, uniq, convertPropToLower, merge,flatten,get, findPropPath,setPropPath, deepClone, formatSizeUnit, isWeakSet,isWeakMap,isMap,isFormData, isError, isValidDate, isDate,pageHelper,isFunction, isObject, uuid,parseURL, browser,uniqueId,isMobile, isPc, isNode, isBrowser, isString, isSymbol, isSet,isPromise,isInteger,isBoolean, isAsyncFunction,isSyncFunction,isPlainObject, isFloat,isArray, isNullable} = BUtils
      let person = { name: '蔡徐坤' }
      function sayHello() {
        alert('hello world')
      }


      const tree = [
        {
          id: 1,
          name: '香蕉',
          pId: null,
          children: [
            {
              id: 1001,
              name: '香蕉A',
              pId: 1,
              children: [
                {
                  id: 1001001,
                  name: '香蕉A-儿子',
                  pId: 1001,
                  children: [
                    {
                      id: 1001001001,
                      name: '香蕉A-儿子-儿子',
                      pId: 1001001
                    }
                  ]
                }
              ]
            },
            {
              id: 1002,
              name: '香蕉B',
              pId: 1,
              children: [
                {
                  id: 1002002,
                  name: '香蕉B-儿子',
                  pId: 1002
                }
              ]
            },
            {
              id: 1003,
              name: '香蕉C',
              pId: 1,
              children: [
                {
                  id: 1003003,
                  name: '香蕉C-儿子',
                  pId: 1003
                }
              ]
            }
          ]
        },
        {
          id: 2,
          name: '苹果',
          pId: null,
          children: [
            {
              id: 1004,
              name: '苹果A',
              pId: 2,
              children: [
                {
                  id: 1004004,
                  name: '苹果A-儿子',
                  pId: 1004
                }
              ]
            },
            {
              id: 1007,
              name: '苹果D',
              pId: 2
            },
            {
              id: 1008,
              name: '苹果D',
              pId: 2
            },
            {
              id: 1009,
              name: '苹果C',
              pId: 2
            }
          ]
        },
        {
          id: 3,
          name: '橘子',
          pId: null,
          children: [
            {
              id: 1005,
              name: '橘子C',
              pId: 3,
              children: [
                {
                  id: 1005005,
                  name: '橘子C-儿子',
                  pId: 1005
                }
              ]
            },
            {
              id: 1006,
              name: '橘子B',
              pId: 3,
              children: [
                {
                  id: 1006006,
                  name: '橘子B-儿子',
                  pId: 1006
                }
              ]
            },
            {
              id: 1010,
              name: '橘子A',
              pId: 3
            }
          ]
        },
        {
          id: 4,
          name: '西瓜',
          pId: null,
          children: [
            {
              id: 1012,
              name: '西瓜B',
              pId: 4,
              children: [
                {
                  id: 1013,
                  name: '西瓜B-儿子',
                  pId: 1012
                }
              ]
            }
          ]
        },
        {
          id: 1011,
          name: '西瓜A',
          pId: null
        }
      ]
      // tree转化成list, 对应下面输出结果1
      console.log(treeToList({tree: tree, props: {children: 'children'}}));

      // tree转化成list，对应下面输出结果2
      // 保留每一项节点 所有的子代以及所有子代下所有节点（平铺化）、保留每一项节点所经过的路径节点，字段为_pathNodes
      console.log(treeToList({tree: tree, props: {children: 'children'}, retainPaths: true, retainAllChildren: true}));


    </script>
  </body>
</html>
